<template>
  <div
    class="E-wrap-search-result no-scroll-bar"
    :style="{
      width: search_key?'350px':'450px',
      maxHeight: search_key?'375px':'475px'
    }"
  >
    <div v-if="search_key" class="box-search">
      <p class="title" @click="$emit('onSearch',search_key)">
        搜 "
        <span class="key text-ellipsis">{{search_key}}</span> " 相关结果
        <i class="el-icon-arrow-right"></i>
      </p>
      <dl class="wrap-list box-songs" v-if="search_suggest.songs">
        <dt class="title text-ellipsis">
          <i class="fa fa-music" />
          单曲
        </dt>
        <dd
          class="item text-ellipsis"
          @click="open('songs',item)"
          v-for="(item, index) in search_suggest.songs"
          :key="index"
        >{{item | disposeText('songs')}}</dd>
      </dl>
      <dl class="wrap-list box-artists" v-if="search_suggest.artists">
        <dt class="title text-ellipsis">
          <i class="fa fa-user" />
          歌手
        </dt>
        <dd
          class="item text-ellipsis"
          @click="open('artists',item)"
          v-for="(item, index) in search_suggest.artists"
          :key="index"
        >{{item | disposeText('artists')}}</dd>
      </dl>
      <dl class="wrap-list box-albums" v-if="search_suggest.albums">
        <dt class="title text-ellipsis">
          <i class="fa fa-file-archive-o" />
          专辑
        </dt>
        <dd
          class="item text-ellipsis"
          @click="open('albums',item)"
          v-for="(item, index) in search_suggest.albums"
          :key="index"
        >{{item | disposeText('albums')}}</dd>
      </dl>
      <dl class="wrap-list box-mvs" v-if="search_suggest.mvs">
        <dt class="title text-ellipsis box-mvs">
          <i class="fa fa-youtube-play" />
          视频
        </dt>
        <dd
          class="item text-ellipsis"
          @click="open('mvs',item)"
          v-for="(item, index) in search_suggest.mvs"
          :key="index"
        >{{item | disposeText('mvs')}}</dd>
      </dl>
      <dl class="wrap-list box-playlists" v-if="search_suggest.playlists">
        <dt class="title text-ellipsis">
          <i class="fa fa-list" />
          歌单
        </dt>
        <dd
          class="item text-ellipsis"
          @click="open('playlists',item)"
          v-for="(item, index) in search_suggest.playlists"
          :key="index"
        >{{item | disposeText('playlists')}}</dd>
      </dl>
    </div>
    <div v-else class="box-hot no-scroll-bar">
      <div class="search-history" v-if="tags.length">
        <p class="title">
          搜索历史
          <i @click="$emit('onClearHistoryTag')" class="btn btn-right el-icon-delete" />
        </p>
        <div class="body">
          <el-tag
            v-for="(tag, index) in tags"
            :key="index"
            :type="tag.type"
            @click="$emit('onSearch',tag.name)"
            @close="$emit('onClearHistoryTag',tag)"
            :disable-transitions="true"
            closable
          >{{tag.name}}</el-tag>
        </div>
      </div>
      <div class="hot-list">
        <p class="title">热搜榜</p>
        <div class="body">
          <ul>
            <li
              v-for="(item, index) in topSearch"
              :key="index"
              @click="$emit('onSearch',item.searchWord)"
            >
              <div class="left-index">{{index+1}}</div>
              <div class="right-content">
                <p class="title text-ellipsis">{{item.searchWord}}</p>
                <p class="text-ellipsis">{{item.content}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['search_key', 'tags', 'search_suggest'],
  mounted() {
    this.$api.get('search_hot_detail').then(({ data }) => {
      this.topSearch = data;
    });
  },
  data() {
    return {
      topSearch: []
    };
  },
  methods: {
    open(type, item) {
      if (type === 'songs') {
        this.$api.get('music_suggest', { id: item.id }).then(() => this.$api.get('music_url', { id: item.id })).then(({ data }) => {
          const url = data[0] ? data[0].url : '';
          if (!url) {
            this.$message('付费歌曲，vip开好了嘛？');
            return;
          }
          console.log(url);
        });
      } else {
        console.log(type, item);
      }
      this.$message('该功能暂未完善，敬请期待 ~');
    }
  },
  filters: {
    disposeText(item, type) {
      if (type === 'songs') {
        // 单曲
        let artists = item.artists.map((it) => it.name).join('、');
        artists = artists ? ` - ${artists}` : '';
        return `${item.name}${artists}`;
      } if (type === 'artists') {
        // 歌手
        return item.name;
      } if (type === 'albums') {
        // 专辑
        let artist = item.artist.name;
        artist = artist ? ` - ${artist}` : '';
        return `${item.name}${artist}`;
      } if (type === 'mvs') {
        // 视频
        let artists = item.artists.map((it) => it.name).join('、');
        artists = artists ? ` - ${artists}` : '';
        return `${item.name}${artists}`;
      } if (type === 'playlists') {
        // 歌单
        return item.name;
      }
      return item;
    }
  }
};
</script>

<style lang="scss">
.E-wrap-search-result {
  cursor: default;
  transition: all 0.5s;
  overflow: hidden;
  overflow-y: scroll;
  & > .box-search {
    line-height: 25px;
    & > .title {
      margin-bottom: 5px;
      padding-left: 10px;
      cursor: pointer;
      &:only-of-type {
        margin-bottom: 0;
      }
      &:hover {
        color: #000;
      }
      & > .key {
        display: inline-block;
        color: rgb(12, 115, 194);
        max-width: 200px;
        vertical-align: middle;
      }
    }
    .wrap-list {
      font-size: 13px;
      & > .title {
        background: rgb(245, 245, 247);
        padding: 0 10px;
        & > i {
          margin-right: 5px;
        }
      }
      & > .item {
        padding-left: 30px;
        padding-right: 10px;
        cursor: pointer;
        &:hover {
          background: rgb(238, 238, 238);
        }
        & > .tint {
          color: #666;
        }
      }
    }
  }
  & > .box-hot {
    & > .search-history,
    & > .hot-list {
      & > .title {
        padding-left: 15px;
        font-size: 15px;
        line-height: 25px;
        margin-bottom: 10px;
        & > .btn-right {
          margin-left: 5px;
        }
        & > .btn {
          &:hover {
            color: #000;
            cursor: pointer;
          }
        }
      }
    }
    & > .search-history {
      margin-bottom: 10px;
      & > .body {
        padding: 0 15px;
        & > .el-tag {
          margin: 0 10px 10px 0;
        }
      }
    }
    & > .hot-list {
      ul {
        & > li {
          $size: 55px;
          display: flex;
          color: rgb(156, 156, 156);
          &:hover {
            background: rgb(237, 237, 237);
          }
          & > .left-index {
            width: $size;
            height: $size;
            line-height: $size;
            flex: 0 0 $size;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
          }
          & > .right-content {
            flex-grow: 1;
            overflow: hidden;
            padding-right: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            & > p {
              height: 24px;
              line-height: 24px;
              font-size: 12px;
              &.title {
                height: 20px;
                line-height: 20px;
                color: #555;
              }
            }
          }
          &:nth-of-type(1),
          &:nth-of-type(2),
          &:nth-of-type(3) {
            & > .left-index {
              color: rgb(214, 66, 66);
            }
            & > .right-content {
              & > p.title {
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
}
</style>
